<template>
  <div>
    <!--    <button>Player</button>-->
    <!--    绑定的是常量字符串-->
    <!--    <el-button type="primary">go</el-button>-->
    <!--    绑定的是primary变量-->
    <!--    <el-button :type="primary">go</el-button>-->
    <!--    <el-button @click="appear">出现</el-button>-->
    <!--        <el-button @click="()->this.$message.info("马钰雯加油")">出现</el-button>-->
    <!--    <el-form>-->
    <!--      类比user v-model的意思是将值绑定在input标签：在input标签中输入值（类似于user在后台直接被赋值），这样就会打印出来-->
    <!--    <el-input v-model="searchForm.queryCondition.nickNameSml"></el-input>-->
    <!--    </el-form>-->
    <!--    "queryCondition": {-->
    <!--    "goldCoinMax": 80,-->
    <!--    "goldCoinMin": 60,-->
    <!--    "nickNameSml": "马",-->
    <!--    "playerCode": "8119403",-->
    <el-form
      ref="searchForm"
      class="searchForm"
      :model="searchForm"
      label-width="auto"
    >
      <el-row :gutter="12">
        <!--        合计24份  -->
        <el-col :span="6">
          <el-form-item prop="queryCondition.nickNameSml" label="姓名">
            <el-input v-model.trim="searchForm.queryCondition.nickNameSml">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.goldCoinMin" label="最小值">
            <el-input v-model.number="searchForm.queryCondition.goldCoinMin">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.goldCoinMax" label="最大值">
            <el-input v-model.number="searchForm.queryCondition.goldCoinMax">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.playerCodeSml" label="用户编号">
            <el-input v-model.number="searchForm.queryCondition.playerCodeSml">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="18">
        <el-col :span="12"></el-col>
        <!--    <span>12</span>-->
        <!--        <el-form-item label="职业" prop="queryCondition.professions">-->
        <!--        不加prop重置按钮不好使-->
        <el-form-item label="职业" prop="queryCondition.professions">
          <!--          <el-form-item label="职业" formatter="professionFormat" >-->
          <el-checkbox-group v-model="searchForm.queryCondition.professions">
            <!--          <el-checkbox label="writer">作家</el-checkbox>-->
            <!--          <el-checkbox label="architect">建筑师</el-checkbox>-->
            <!--          <el-checkbox label="wizard">巫师</el-checkbox>-->
            <el-checkbox
              v-for="e in professionTypes"
              :key="e.index"
              :label="e.value"
              >{{ e.text }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-row>

      <el-form-item>
        <!--        icon是一些样式，可以在element-ui官网上进行查询样式-->
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="queryByCondition(1)"
          >查询</el-button
        >
        <!--        @click="() => $refs.searchForm.resetFields()<el-form></el-form>标签所带的方法，-->
        <!--        虚拟子标签最后会被解析为<form></form>标签-->
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.searchForm.resetFields()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!--    "playerId": 84,-->
    <!--    "playerCode": "8116666",-->
    <!--    "nickname": "马宜泽",-->
    <!--    "goldCoin": 94,-->
    <!--    "silverCoin": 66,-->
    <!--    "profession": "writer",-->
    <!--    "usernameFk": "2016207099",-->
    <!--    "version": 1-->

    <!--    <el-table :data="results">-->
    <!--      <el-table-column label="用户" prop="playerId"></el-table-column>-->
    <!--      <el-table-column label="学号" prop="usernameFk"></el-table-column>-->
    <!--      <el-table-column label="昵称" prop="nickname"></el-table-column>-->
    <!--      <el-table-column label="金币数量" prop="goldCoin"></el-table-column>-->
    <!--      <el-table-column label="银币数量" prop="silverCoin"></el-table-column>-->
    <!--      <el-table-column label="专业" prop="profession"></el-table-column>-->
    <!--    </el-table>-->
    <!--    <el-pagination :total="total" :current-page="searchForm.pageNum" -->
    <!--                   :page-size="searchForm.pageNum" -->
    <!--                   @current-page="queryByCondition">-->
    <!--    </el-pagination>-->
    <!--    父标签  子标签-->
    <!--    调用端  被调用端-->
    <!--    父组件  子组件-->
    <!--    <el-row :gutter="12">声明一行，并将间距变大，使用gutter-->
    <el-row :gutter="12">
      <!--      <el-col :span="3" :offset="20">-->
      <el-col :span="2">
        <insert-player @postSubmit="queryByCondition"></insert-player>
        <!--          <el-form label-width="auto">-->
        <!--            <el-col :span="4" :offset="4">-->
        <!--              <el-form-item label="提供者">-->
        <!--            <el-input v-model="supplyNickname"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :span="4">-->
        <!--              <el-form-item label="获得者">-->
        <!--            <el-input v-model="consumerNickname"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :span="3">-->
        <!--              <el-form-item label="数量">-->
        <!--                <el-input v-model="deallbill.quantity"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :span="3">-->
        <!--              <el-form-item label="交易信息">-->
        <!--                <el-input v-model="deallbill.dealNote"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-button @click="dealbillSubmit">提交</el-button>-->
        <!--          </el-form>-->
        <!--    </el-row>-->
      </el-col>
      <el-col :span="22">
        <gold-coin-deal
          :supplier="supplier"
          :consumer="consumer"
          @postSubmit="queryByCondition"
        ></gold-coin-deal>
      </el-col>
    </el-row>
    <!--    <insert-player title="张三" :abc="primary" @omSumbit="queryByCondition"></insert-player>-->
    <!--    <insert-player title="马钰雯"></insert-player>-->
    <!--    父组件调用子组件的方法时，@符号出来的一般都不好用，进入子组件，-->
    <!--    Ctrl+V搜索emit,显示的就是可以绑定的方法以及方法所带有的参数-->
    <!--    results绑定的结果，靠table渲染的一个结果-->
    <el-table :data="results" class="resultsTable" stripe width="300px">
      <el-table-column prop="playerId" label="ID"></el-table-column>
      <el-table-column label="学号" prop="usernameFk"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="金币数量" prop="goldCoin"></el-table-column>
      <el-table-column label="银币数量" prop="silverCoin"></el-table-column>

      <el-table-column
        label="专业"
        :formatter="professionFormat"
      ></el-table-column>
      <!--          <el-table-column prop="" label="" :formatter="Format">-->
      <!--          </el-table-column>-->
      <el-table-column width="180px" fixed="left">
        <!--            props指的是所有的结果，props.row指的是其中的一条数据-->
        <!--        <template slot-scope="props">:作用域插槽-->
        <!--        作用域插槽一行里面有一个重要的属性row-->
        <template slot-scope="props">
          <el-button
            class="el-button--mini"
            type="warning"
            icon="el-icon-edit"
            @click="supplyBy(props.row)"
            >提供</el-button
          >
          <el-button
            class="el-button--mini"
            type="danger"
            icon="el-icon-edit"
            @click="consumeBy(props.row)"
            >消费</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
//import {mapState} from 'vuex'
// import New from './components/New.vue';
//import axios from "axios";

import InsertPlayer from "@/components/InsertPlayer";
import GoldCoinDeal from "@/components/GoldCoinDeal";
export default {
  name: "Player",
  components: {
    GoldCoinDeal,
    InsertPlayer,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      //String sampleD="value";弱类型的语言
      sampleD: "value",
      primary: "danger",
      types: ["a", "b"],
      //List types = new ArraysList;
      //types.add("a");
      //types.add("b");

      user: {
        //User user=new User();
        //使用user的set方法进行设置属性值
        username: "张三",
        password: "123",
      },
      searchForm: {
        pageNum: 1,
        pageSize: 6,
        queryCondition: {
          nickNameSml: "", //null同样的效果
          goldCoinMin: null,
          goldCoinMax: null,
          professions: [],
          playerCodeSml: "",
        },
      },
      total: 0,
      results: [],
      // supplyNickname:null,
      // consumerNickname:null,
      supplier: {},
      consumer: {},
      // professionTypes: [
      //   {
      //     value: "writer",
      //     text: "作家",
      //     index: 0,
      //   },
      //   {
      //     value: "wizard",
      //     text: "巫师",
      //     index: 1,
      //   },
      //   {
      //     value: "accountant",
      //     text: "会计师",
      //     index: 2,
      //   },
      //   {
      //     value: "architect",
      //     text: "建筑师",
      //     index: 3,
      //   },
      // ],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    //professionTypes:this.$store.professionTypes,

    professionTypes() {
      return this.$store.state.professionTypes;
    },
    //  ...mapState(['professionTypes'])
  },
  created() {},
  mounted() {
    //this.queryByCondition(1)
  },
  methods: {
    sampleM() {},
    appear() {
      // this.$message.success("早晨好"),
      //$message 和$notify只是两种不同的方框格式，里面有successd,warning等不同的样式
      //   this.$message.success(JSON.stringify(this.user));
      //JSON.stringify()将对象转换为字符串形式

      // this.$notify.warning(JSON.stringify(this.user));
      // this.$notify.warning(JSON.stringify(this.searchForm));
      //   window.alert("操作失败");
      this.$http({
        method: "get",
        url: "/ceto/common/professionTypes",
      }).then(
        (res) => {
          console.log(res.data);
          this.$message.success(JSON.stringify(res.data));
        },
        (error) => {
          console.log(error);
        }
      );
    },
    // queryByCondition(pageNum) {
    //   if (pageNum)
    //     this.searchForm.pageNum = pageNum;
    //   // this.$notify.warning(JSON.stringify(this.searchForm));
    //
    //   //this.$message.success(JSON.stringify(this.searchForm));
    //   this.$http({
    //     method: "post",
    //     url: "/ceto/player/query",
    //     data: this.searchForm,
    //   }).then(
    //     (res) => {
    //       this.$message.warning(JSON.stringify(res.data));
    //       this.total = res.data.total;
    //       this.results = res.data.results;
    //     },
    //     (error) => {
    //       console.log(".searchForm request error : " + error.response.status);
    //     }
    //   );
    // },
    queryByCondition(pageNum) {
      if (pageNum) this.searchForm.pageNum = pageNum;
      this.$http({
        method: "post",
        url: "/ceto/player/query",
        data: this.searchForm,
      }).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query mistake：" + error.response.status);
        }
      );
    },
    professionFormat(row) {
      // console.log(row.profession);
      // console.log(this.professionTypes);
      // return 1;
      for (let e of this.professionTypes) {
        if (e.value == row.profession) return e.text;
      }
      //lamb表达式
      // let target = this.professionTypes.find(
      //   (e) => e.value() == row.profession
      // );
      //  return target ? target.text : "N/A";
    },
    // eslint-disable-next-line no-unused-vars
    supplyBy(row) {
      this.supplier = row;
      // this.$message.info(JSON.stringify(row));
      // this.supplyNickname=row.nickname;
    },
    consumeBy(row) {
      // this.$message.info(JSON.stringify(row));
      // this.consumerNickname=row.nickname;
      this.consumer = row;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
